<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="shop-info-box">
					<view class="info-item flexWrapNo" v-if="!id">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">约球类型:</view>
							<picker @change="changeType" :value="typeIndex" :range="typeList" range-key="name">
								<view class="select-input">{{typeList[typeIndex].name}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="remaks-box" v-if="!id">
						抢台费为败者付台费，平台先预收双方台费，结束后，双方认可比赛结果，系统自动退费给胜者。
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">开台时间:</view>
						<view class="flexWrap">
							<picker mode="date" style="flex: none;min-width: 160upx;" :data-index='0' :value="startDate"
								@change="bindDateChange">
								<view class="select-input" v-if="startDate">{{startDate}}</view>
								<view class="select-input" v-else>请选择日期</view>
							</picker>
							<text class="small">-</text>
							<picker mode="time" style="flex: none;min-width: 160upx;" :start="startTime" :data-index='1' :value="startTime"
								@change="bindDateChange">
								<view class="select-input" v-if="startTime">{{startTime}}</view>
								<view class="select-input" v-else>请选择时间</view>
							</picker>
						</view>
					</view>
					<view class="info-item flexWrapNo" v-if="!id">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">开台时长:</view>
							<picker @change="changeDuration" :value="durationIndex" :range="durationList" range-key="name">
								<view class="select-input">{{durationList[durationIndex].name}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="info-item flexWrapNo" v-if="!id">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">邀约门店:</view>
							<picker @change="changeEquipment" :value="equipmentIndex" :range="equipmentList"
								range-key="equipment_name">
								<view class="select-input">{{equipmentList[equipmentIndex].equipment_name}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="info-item flexWrapNo">
						<view class="flexWrapNo" style="flex: 1;">
							<view class="item-title">邀约段位:</view>
							<picker @change="changeRank" :value="rankIndex" :range="rankList" range-key="name">
								<view class="select-input">{{rankList[rankIndex].name}}</view>
							</picker>
						</view>
						<text class="icon-more"></text>
					</view>
					<view class="info-item flexWrapNo">
						<view class="item-title">邀约留言:</view>
						<textarea placeholder="请输入" placeholder-class="placeholderclass"
							v-model="leave_message"></textarea>
					</view>
					<view class="remaks-box">
						备注：您的账号已经实名，留言请遵守法纪法规，请勿发布涉黄、涉恐、涉政内容。
					</view>
				</view>
				<view class="exeplan-box">
					<view>1、桌台预约：发起约球，桌台也会同步预定，约定时间{{Number(no_responsibility_cancel/60)}}小时前可无责取消，{{Number(no_responsibility_cancel/60)}}小时内不可取消，请慎重发起。</view>
					<view>2、修改：约球最多允许修改{{modify_num}}次，且在预约时间开始前{{Number(about_ball_modify/60)}}小时不允许修改；</view>
					<view>3、取消约球：一旦应约，不可取消。如确实因不可抗因素无法赴约，请联系店长处理。（店长电话：{{customer_service_mobile}}）</view>
					<view>4、未约成：无人应约，开始前{{minutes_ago}}分钟，系统会自动取消预约。</view>
					<view>5、爽约：订单结束后，在“我的约球”中确认；抢台费模式由爽约方支付台费；我买单模式退还应约人押金给未爽约人；AA支付模式由双方AA支付台费，不退还。</view>
				</view>
				<view class="bottom-box flexWrapNo">
					<view class="define-btn" @tap="editAppoint()" v-if="id">确认修改</view>
					<view class="define-btn" @tap="submitOrder()" v-else>发起约球</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			// const currentDate = this.getDate({
			// 	format: true
			// })
			// const currentTime = this.getTimeString(4)
			return {
				pageOpc: 0,
				typeList: [{
						name: '抢台费',
						id: 1
					},
					{
						name: '我买单',
						id: 2
					},
					{
						name: 'AA支付',
						id: 3
					}
				],
				typeIndex: 0,
				typeId: '',
				startDate:"",
				startTime: "",
				appointmentTime: "",
				durationList: [{
						name: '1小时',
						id: 1
					},
					{
						name: '2小时',
						id: 2
					},
					{
						name: '3小时',
						id: 3
					}
				],
				durationIndex: 0,
				duration: "",
				equipmentList: [],
				equipmentIndex: 0,
				equipment_id: "",
				equipment_name:'',
				rankList: [{
						name: '渣渣',
						id: 1
					},
					{
						name: '业余',
						id: 2
					},
					{
						name: '专业',
						id: 3
					}
				],
				rankIndex: 0,
				rank: "",
				leave_message: "",
				id:"",
				modify_num:0,
				customer_service_mobile:"",
				no_responsibility_cancel:"",
				about_ball_modify:"",
				minutes_ago:""
			}
		},
		onLoad(ops) {
			if(ops&&ops.id){
				this.id=ops.id
				this.getInfo()
			}
			this.getEquipmentList();
			this.getAppointmentInfo();
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		methods: {
			getAppointmentInfo(){
				this.$request.post(this.$api.appointmentInfo, {
					id:uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						this.customer_service_mobile=data.customer_service_mobile
						this.modify_num=data.modify_num
						this.no_responsibility_cancel=data.no_responsibility_cancel
						this.minutes_ago=data.minutes_ago
						this.about_ball_modify=data.about_ball_modify
						if(!this.id){
							let addNum=Number(data.in_minutes/60)
							this.startTime=this.getTimeString(addNum);
							this.startDate=this.getDate(addNum);
						}
					}
				})
			},
			getTimeString(num) {
				var time = new Date();
				time.setHours(time.getHours() + num);
				let hours = time.getHours() <= 9 ? '0' + time.getHours() : time.getHours()
				let minutes = time.getMinutes() <= 9 ? '0' + time.getMinutes() : time.getMinutes()
				return hours + ":" + minutes
			},
			// 获取时间
			getDate(num) {
				const date = new Date();
				date.setHours(date.getHours()+num);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getEquipmentList(){
				this.$request.post(this.$api.equipmentList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.equipmentList=data
						this.equipment_name=this.equipmentList[0].equipment_name
					}
				})
			},
			getInfo(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$request.post(this.$api.appointmentDetails, {
					longitude:uni.getStorageSync('longitude'),
					latitude:uni.getStorageSync('latitude'),
					id:this.id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.leave_message=data.leave_message
						this.rankIndex=this.rankList.findIndex(item=>item.name==data.rank)
						let timeSrt=data.selected_time.split('-')[0]
						this.startDate=timeSrt.split(' ')[0].replace(/[年月]/g,"-")
						this.startDate=this.startDate.replace(/[日]/g,"")
						this.startTime=timeSrt.split(' ')[1]
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			changeType(e) {
				this.typeIndex = e.detail.value
				this.typeId = this.typeList[this.typeIndex].id
			},
			changeDuration(e) {
				this.durationIndex = e.detail.value
				this.duration = this.durationList[this.durationIndex].id
			},
			changeEquipment(e) {
				this.equipmentIndex = e.detail.value
				this.equipment_id = this.equipmentList[this.equipmentIndex].id
				this.equipment_name=this.equipmentList[this.equipmentIndex].equipment_name
			},
			changeRank(e) {
				this.rankIndex = e.detail.value
				this.rank = this.rankList[this.rankIndex].id
			},
			// 选择时间
			bindDateChange(e) {
				let index = e.currentTarget.dataset.index
				if (index == 0) {
					this.startDate = e.target.value
				} else {
					this.startTime = e.target.value
				}
			},
			submitOrder() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				if (!this.leave_message) {
					this.$tools.hideLoading()
					this.$tools.showToast("请填写留言")
					return;
				}
				let about_ball_type = this.typeId || this.typeList[this.typeIndex].id
				let duration = this.duration || this.durationList[this.durationIndex].id
				let equipment_id = this.equipment_id || this.equipmentList[this.equipmentIndex].id
				let rank = this.rank || this.rankList[this.rankIndex].id
				this.appointmentTime = this.startDate + ' ' + this.startTime
				this.$request.post(this.$api.addAppoint, {
					about_ball_type: about_ball_type,
					appointment_time: this.appointmentTime,
					duration: duration,
					store_id: uni.getStorageSync('store_id'),
					equipment_id: equipment_id,
					rank: rank,
					leave_message: this.leave_message,
					type: 1
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					data.equipment_name=this.equipment_name
					if (res.code == 1) {
						uni.navigateTo({
							url:'/pages/appointment/confirmOrder?orderData='+JSON.stringify(data)
						})
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 修改
			editAppoint(){
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				if (!this.leave_message) {
					this.$tools.hideLoading()
					this.$tools.showToast("请填写留言")
					return;
				}
				let rank = this.rank || this.rankList[this.rankIndex].id
				this.appointmentTime = this.startDate + ' ' + this.startTime
				this.$request.post(this.$api.editAppoint, {
					appointment_time: this.appointmentTime,
					rank: rank,
					leave_message: this.leave_message,
					id:this.id
				}, {
					token: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 1) {
						let pages = getCurrentPages(); //当前页
						let beforePage = pages[pages.length - 2]; //上个页面
						beforePage.$vm.getList()
						this.$tools.showToast('操作成功')
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 36upx;
		padding-bottom: 120upx;

		.shop-info-box {
			.info-item {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40upx;
				color: #FFFFFF;
				padding: 30upx 0;
				border-bottom: 1upx solid #36355E;

				picker {
					flex: 1;
				}

				.item-title {
					margin-right: 32upx;
					flex: none;
				}

				.small {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin: 0 40upx;
				}

				.select-input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}

				input {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
					flex: 1;
				}

				.icon-more {
					border-color: #FFFFFF;
				}

				.placeholderclass {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFE577;
				}

				textarea {
					background: #1D1C5C;
					border-radius: 16upx;
					padding: 30upx;
					height: 140upx;
				}
			}

			.remaks-box {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #82819B;
				line-height: 40rpx;
				padding-left: 158upx;
				margin-top: 12upx;
			}
		}

		.exeplan-box {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #82819B;
			margin-top: 48upx;
			line-height: 40upx;
		}

		.bottom-box {
			height: 120rpx;
			background: #1D1C5C;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			justify-content: center;
			font-size: 32rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;

			.define-btn {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				width: 322rpx;
				height: 80rpx;
				background: #26BCFD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				text-align: center;
			}
		}
	}
</style>
